<template>
  <switch
    class="tz-switch"
    color="#1c78ef"
    v-bind="$attrs"
    :checked="modelValue"
    @change="onChange"
  >
  </switch>
  <slot />
</template>
<script>
export default {
  name: "TzSwitch",
  inheritAttrs: false,
  props: {
    modelValue: {
      type: [String, Number, Boolean],
      required: true,
      default: "",
    },
  },
  emits: ["update:modelValue"],
  setup(props, { emit }) {
    const onChange = (e) => {
      emit("update:modelValue", e.detail.value);
    };
    return { onChange };
  },
};
</script>

<style lang="scss">
taro-switch-core {
  line-height: inherit;

  input {
    font-size: inherit;
    line-height: inherit;
  }
}
</style>
